<template>
    <el-container class="screen-body">
        <el-header style="height: 97px;">
            <ScreenHeader :header="pageTitle" ref="screenHeader"></ScreenHeader> 
        </el-header>
        <el-main class="screen-main">
            <el-carousel :interval="10000" arrow="never" height="960px" @change="switchPage">
                <el-carousel-item class="testttttttt" v-for="item in 3" :key="item">
                    <All v-if="item===1" :colors="colors" ref="child"></All>
                    <Undergraduate v-if="item===2" :colors="colors" ref="child"></Undergraduate>
                    <Postgraduate v-if="item===3" :colors="colors" ref="child"></Postgraduate>
                </el-carousel-item>
            </el-carousel>
        </el-main>
    </el-container>
</template>

<script>
import ScreenHeader from "./screenHeader";
import All from "./all";
import Postgraduate from "./postgraduate";
import Undergraduate from "./undergraduate";
export default {
  name: "ScreenPage",
  data() {
    return {
      colors: {
        undergraduate: {
          color0: "#31bce5",
          color1: "#1368c5"
        },
        postgraduate: {
          color0: "#67c23a",
          color1: "#2b9357"
        },
        currentIndex:0,
      },
      pageTitle: "",
      pageTitles: [
        (new Date()).getFullYear() + "级新生报到情况统计",
        (new Date()).getFullYear() + "级本科生新生报到情况统计",
        (new Date()).getFullYear() + "级研究生新生报到情况统计"
      ],
      timer: null,
      timeDuration: 10000, // 一直停留会刷新接口得间隔时间
    };
  },
  mounted() {
     this.timer = setInterval(() => {
        this.$refs.screenHeader.getTime()
      },this.timeDuration)
  },
  destroyed() {
    // 销毁定时器
    if (this.timer) {
      window.clearInterval(this.timer);
      this.timer = undefined;
    }
  },
  methods: {
    switchPage(newIndex, oldIndex) {
      this.clearTimer()
      this.setTimer()
      this.pageTitle = this.pageTitles[newIndex] || this.pageTitles[0]
      this.currentIndex = newIndex,
      this.$refs.child[this.currentIndex].init();
    },
    setTimer () {
      this.timer = setInterval(() => {
        this.$refs.screenHeader.getTime()
        this.$refs.screenHeader.showNowTime()
        this.$refs.child[this.currentIndex].init();
      },this.timeDuration)
    },
    clearTimer () {
      clearInterval(this.timer)
    }
  },
  components: {
    ScreenHeader,
    All,
    Postgraduate,
    Undergraduate
  }
};
</script>

<style scoped>
.screen-body {
  background: url("/static/images/screen/bg.jpg");
  width: 1920px;
  height: 1080px;
}
.screen-main {
  margin-top: 8px;
}
.el-header,
.el-main {
  padding: 0px;
}
</style>
